

<template>
  <a-form :model="form" direction="vertical" label-align="right">
    <a-form-item field="title" label="标题">
      <a-input v-model="form.title" placeholder="请输入标题" :style="{width:'320px'}"/>
    </a-form-item>
    <a-form-item field="content" label="题目内容">
      <MdiEditor :value="form.content" @change="handleChangeContent"/>
    </a-form-item>
    <a-form-item field="answer" label="标准答案">
      <MdiEditor :value="form.answer" @change="handleChangeAnswer"/>
    </a-form-item>
    <a-form-item field="tags" label="标签">
      <a-input-tag :default-value="form.tags" v-model="form.tags" :style="{width:'320px'}" placeholder="请输入标签"
                   allow-clear/>
    </a-form-item>
    <a-form-item field="content" label="判题配置">
      <a-space direction="vertical" fill>
        <a-form-item label="时间限制(ms)">
          <a-input-number :style="{width:'320px'}" :default-value="0" mode="button"
                          @change="judgeConfigChange(form.judgeConfig.timeLimit)" :min="0" class="input-demo"
                          v-model="form.judgeConfig.timeLimit"/>
        </a-form-item>
        <a-form-item label="内存限制(KB)">
          <a-input-number :style="{width:'320px'}" :default-value="0"
                          @change="judgeConfigChange(form.judgeConfig.memoryLimit)" mode="button" :min="0"
                          class="input-demo"
                          v-model="form.judgeConfig.memoryLimit"/>
        </a-form-item>
        <a-form-item label="堆栈限制(KB)">
          <a-input-number :style="{width:'320px'}" @change="judgeConfigChange(form.judgeConfig.stackLimit)"
                          :default-value="0" mode="button" :min="0" class="input-demo"
                          v-model="form.judgeConfig.stackLimit"/>
        </a-form-item>

      </a-space>

    </a-form-item>

    <a-form-item label="判题用例配置">
      <a-space direction="vertical" fill>
        <a-form-item v-for="(judgeCaseItem,index) in form.judgeCase"
                     :key="index"
                     no-style
        >
          <a-form-item :label="`输入${index}`" :key="index">
            <a-input v-model="judgeCaseItem.input" :style="{width:'300px'}"/>
          </a-form-item>
          <a-form-item :label="`输出${index}`" :key="index">
            <a-input v-model="judgeCaseItem.output" :style="{width:'300px'}"/>
          </a-form-item>
          <a-button @click="handleDelete(index)" type="dashed" status="danger">删除用例</a-button>
        </a-form-item>
        <a-button @click="addJudgeCase()" type="primary" status="success">添加用例</a-button>
      </a-space>
    </a-form-item>

    <a-form-item>
      <a-button type="primary" style="min-width: 640px" @click="submitQuestion">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue';
import MdiEditor from "@/components/MdiEditor.vue";
import {QuestionControllerService} from "../../../generated";
import {useRoute, useRouter} from "vue-router";
import message from "@arco-design/web-vue/es/message";
const questionId = ref();
const route = useRoute();
const router = useRouter();
let form = reactive({
  title: '',
  content: '',
  answer: '',
  tags: [],
  judgeCase: [{
    input: '3 4',
    output: '5 6'
  }],
  judgeConfig: {
    memoryLimit: 0,
    timeLimit: 0,
    stackLimit: 0
  }

})

//提交题目信息到后端的方法
const submitQuestion = async () => {
  if (questionId.value) {
    //如果传进来的id有值 就是更新操作  否则就是新增操作
    const res = await QuestionControllerService.updateQuestionUsingPost(form)//更新问题
    if (res.code == 0) {
      message.success('更新成功')
    } else {
      message.error(res.message)
    }
  } else {
    const res = await QuestionControllerService.addQuestionUsingPost(form)//新增问题
    if (res.code == 0) {
      message.success('添加成功')
    } else {
      message.error(res.message)
    }
  }
  await router.push({
    path:'/mangerQuestion'
  })

}

//判题堆栈配置值发生改变触发的方法
const judgeConfigChange = (v: number) => {
  if (v < 0) {
    v = 0
  }
}
//添加测试用例
const addJudgeCase = () => {
  form.judgeCase.push(
      {
        input: '',
        output: ''
      }
  )
}
//根据id查询问题
const getQuestionById = async (questionId: number) => {
  const res = await QuestionControllerService.getQuestionByIdUsingGet(questionId);
  if (res.code == 0) {
    form = Object.assign(form, res.data)
    //解析JSON字符转信息
    if (!form.judgeCase) {
      //如果judgeCase属性为空  设置默认值
      form.judgeCase = [{
        input: '',
        output: ''
      }]
    } else {
      //解析成字符串信息
      form.judgeCase = JSON.parse(form.judgeCase as any)
    }
    if (!form.tags) {
      form.tags = []
    } else {
      form.tags = JSON.parse(form.tags as any)
    }
    if (!form.judgeConfig) {
      form.judgeConfig = {
        memoryLimit: 0,
        timeLimit: 0,
        stackLimit: 0
      }
    } else {
      form.judgeConfig = JSON.parse(form.judgeConfig as any)
    }
  }
}
//删除测试用例方法
const handleDelete = (index: number) => {
  form.judgeCase.splice(index, 1)
}
const handleChangeContent = (v: string) => {
  form.content = v;
}
const handleChangeAnswer = (v: string) => {
  form.answer = v;
}

onMounted(() => {
  questionId.value = route.params.id;
  if (questionId.value) {
    //查询题目信息回显
    getQuestionById(questionId.value)
  }
})
</script>